use super::todo_item::TodoItemComponent;
use crate::models::TodoItem;
//use gloo::console;
use stylist::yew::styled_component;
use yew::{html, Callback, Html, Properties};

#[derive(Properties, Clone, PartialEq)]
pub struct TodoItemsProps {
    pub data: Vec<TodoItem>,
    pub on_status_changed: Callback<(String, bool)>,
    pub on_edit_click: Callback<String>,
}

#[styled_component]
pub fn TodoItemsComponent(props: &TodoItemsProps) -> Html {
    let data = props.data.clone();
    html! {
        <div class="w-100 padding-middle">
            <ul class="w-100 columns" style="padding:0 0;">
                { for data.iter().map(|todo| {
                    html! {
                        <li style="list-style-type: none;">
                            <TodoItemComponent
                                data={todo.clone()}
                                on_status_changed={props.on_status_changed.clone()}
                                on_edit_click={props.on_edit_click.clone()}
                            />
                        </li>
                    }
                })}
            </ul>
        </div>
    }
}
